<template>
    <view>
        <view class="file-display" v-for="(item, index) in data" :key="index">
            <image v-if="isImg(item.attrCaption)" :src="item.fileBase64" class="file-icon" mode="aspectFit"></image>
            <view v-else class="file-icon file-type"> {{ getType(item.attrCaption) }}</view>
            <view class="flex1" style="width: 0;">
                <view class="ellipsis">{{ item.attrCaption }}</view>
                <view class="file-size">{{ bytesToSize(item.attrSize) }}</view>
            </view>
        </view>
    </view>
</template>
<script>
import { downloadBase64, bytesToSize } from "@/utils/common.js"
export default {
    name: 'FileDisplay',
    props: {
        data: {
            type: Array, default: []
        },
    },
    computed: {
        _fileName() {
            if (!this.fileUrl) return ''
            return this.fileUrl.slice(this.fileUrl.lastIndexOf('/') + 1)
        },
    },
    methods: {
        bytesToSize(num) {
            console.log(num);
            if (!num) return ''
            return bytesToSize(num)
        },
        isImg(url) {
            const type = url.slice(url.lastIndexOf('.') + 1)
            return ['png', 'jpeg', 'jpg', 'pdf', 'svg', 'webp', 'gif', 'bmp'].includes(type)
        },
        getType(url) {
            const value = url.slice(url.lastIndexOf('.') + 1, url.lastIndexOf('.') + 2)
            return value
        },
        downLoad(item) {
            downloadBase64(item.fileBase64, item.attrCaption)
        }
    }
}
</script>
<style lang="scss">
.file-display {
    padding: 24rpx;
    background: #F6F6F6;
    border-radius: 4rpx;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    margin-bottom: 20rpx;

    .file-icon {
        width: 64rpx;
        height: 64rpx;
        margin-right: 18rpx;
    }

    .file-type {
        background-color: #FA5051;
        font-weight: bold;
        font-size: 40rpx;
        line-height: 64rpx;
        text-align: center;
        color: #fff;
        border-radius: 6rpx;
    }

    .file-size {
        font-weight: 400;
        font-size: 24rpx;
        color: #999999;
    }
}
</style>